<template>


  <div class="loginContent">

    <div class='loginLeft'>
      <iframe
        src="https://www.shangbian.net/donghua/index.html"
        frameborder="0"
        style="width:100%;height: 855px;margin-top: -9px"
        id="iframeBox"></iframe>

    </div>

    <div class="loginRight">
      <el-card class="login-form-layout" shadow="hover">
<!--        <h2 class="login-title color-main">系统登录</h2>-->
        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
          <el-form-item prop="username">
            <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名">
                  <span slot="prefix">
                    <svg-icon icon-class="user" class="color-main"></svg-icon>
                  </span>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"
                      autoComplete="on" placeholder="请输入密码">
                  <span slot="prefix">
                    <svg-icon icon-class="password" class="color-main"></svg-icon>
                  </span>
              <span slot="suffix" @click="showPwd">
                    <svg-icon icon-class="eye" class="color-main"></svg-icon>
                  </span>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 15px;text-align: center">
            <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>


    </div>


    <!--    <div class='loginLeft'>-->

    <!--    </div>-->


    <!--    <div class="login-container" :style="{backgroundImage:'url('+bgImg+')'}">-->
    <!--      <el-card class="login-form-layout" shadow="hover">-->
    <!--        <h2 class="login-title color-main">系统登录</h2>-->
    <!--        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">-->
    <!--          <el-form-item prop="username">-->
    <!--            <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名">-->
    <!--            <span slot="prefix">-->
    <!--              <svg-icon icon-class="user" class="color-main"></svg-icon>-->
    <!--            </span>-->
    <!--            </el-input>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item prop="password">-->
    <!--            <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password"-->
    <!--                      autoComplete="on" placeholder="请输入密码">-->
    <!--            <span slot="prefix">-->
    <!--              <svg-icon icon-class="password" class="color-main"></svg-icon>-->
    <!--            </span>-->
    <!--              <span slot="suffix" @click="showPwd">-->
    <!--              <svg-icon icon-class="eye" class="color-main"></svg-icon>-->
    <!--            </span>-->
    <!--            </el-input>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item style="margin-bottom: 15px;text-align: center">-->
    <!--            <el-button style="width: 100%" type="primary" :loading="loading" @click.native.prevent="handleLogin">-->
    <!--              登录-->
    <!--            </el-button>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--      </el-card>-->
    <!--    </div>-->
  </div>
</template>

<script>
import bgImg from "@/assets/images/bg-img.jpg"

import {
  isvalidUsername
} from '@/utils/validate';
import {
  setSupport,
  getSupport,
  setCookie,
  getCookie
} from '@/utils/support';

export default {
  name: 'login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!isvalidUsername(value)) {
        callback(new Error('请输入正确的用户名'))
      } else {
        callback()
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 3) {
        callback(new Error('密码不能小于3位'))
      } else {
        callback()
      }
    };
    return {
      bgImg: bgImg,
      loginForm: {
        username: '',
        password: '',
      },
      loginRules: {
        username: [{
          required: true,
          trigger: 'blur',
          validator: validateUsername
        }],
        password: [{
          required: true,
          trigger: 'blur',
          validator: validatePass
        }]
      },
      loading: false,
      pwdType: 'password',
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === 'password') {
        this.pwdType = ''
      } else {
        this.pwdType = 'password'
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {

          this.loading = true;
          this.$store.dispatch('Login', this.loginForm).then((res) => {

            this.loading = false;
            this.$router.push({
              path: '/'
            })
          }).catch(() => {
            this.loading = false
          })


        } else {
          console.log('参数验证不合法！');
          return false
        }
      })
    },
  }
}
</script>

<style scoped>


.loginContent {
  display: flex;
  justify-content: flex-start;
  background-color: #00417e;

}


.loginLeft {
  height: 100vh;
  flex-grow: 2;
  background-size: cover;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.loginRight {
  margin-top: 40px;
  height: 100vh;
  margin-right: 50px;
  background-size: 100% 51%;
  background-position: bottom !important;
  display: flex;
  flex-direction: column;
  background: url() no-repeat, #f6f6f6;
  background-color: #00417e;
}


.login-form-layout {
  /*position: absolute;*/
  left: 0;
  right: 0;
  width: 360px;
  margin: 150px auto;
}

.login-title {
  text-align: center;
}

.login-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
}
</style>
